<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嘀嗒验收小工具</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="icon" type="image/x-icon" th:href="@{/favicon.ico?v=2}">
    <link rel="stylesheet" th:href="@{/css/reset.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/css/convert.css}"/>
    <link rel="stylesheet" th:href="@{/css/cucumber.css}"/>
    <link rel="stylesheet" th:href="@{/css/tool-info.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/drag/drag.css}">
</head>
<body>
    <div th:replace="header::header"></div>
    <main class="app-main" draggable="false">
        <h2 class="title swagger-title"><img th:src="@{/assets/cucumber-convert.svg}" alt=""> Cucumber转Excel</h2>
        <p class="description">测试文档转换</p>
        <section class="swagger-container">
            <div class="swagger-wrap">
                <div class="logo"><img class="img-response" th:src="@{/assets/cucumber-logo.svg}" alt=""></div>
                <p class="desc">请载入你的Cucumber文件夹</p>
                <div class="search">
                    <input name="select-file-input" type="file" webkitdirectory mozdirectory hidden/>
                    <button class="search-container">
                        <span class="prefix"><img src="/assets/folder.svg"></span>
                        <span>点击选择文件夹</span>
                    </button>
                    <p>
                        或直接拽文件夹进来
                    </p>
                </div>
                <div class="scan-result" id="scan-result">
                    <div class="scan-result-head">
                        <div><h3>扫描结果</h3></div>
                        <div class="message">
                            <span id="result-message"></span>
                            <a href="javascript:" class="expand" id="expand-result">
                                查看详情
                                <img src="/assets/arrow-down-green.svg" class="arrow-down">
                                <img src="/assets/arrow-up.svg" class="arrow-up">
                            </a>
                        </div>
                    </div>
                    <div class="feature-info" id="feature-info">
                        <div class="feature-list">
                            <div class="feature-title">
                                <div class="checkbox">
                                    <label>
                                    <input type="checkbox" id="check-all-features">
                                    <span></span>
                                    </label>
                                </div>
                                <div class="feature-desc">
                                    <span>全选</span>
                                    <span style="float: right">拖拽排序（按住command可多选，按住shift可连续选择）</span>
                                </div>
                            </div>
                            <div id="feature-items">

                            </div>
                        </div>
                        <div class="buttons">
                            <button class="update" id="update-preview">更新预览</button><br>
                            <button class="reset" id="reset-order">还原顺序</button>
                        </div>
                    </div>
                </div>
                <div class="preview">
                    <div class="preview-head">
                        <div class="preview-title">效果预览</div>
                        <div class="preview-btns">
                            <button class="btn reset-to-default-btn">恢复默认模板</button>
                            <input name="select-template-input" type="file" accept="text/html" hidden/>
                            <button class="btn select-template-btn">更换模板</button>
                            <a href="javascript:" id="download-excel" class="btn generate">生成</a>
                        </div>
                    </div>
                    <div class="preview-content">
                        <img class="preview-img" style="display: none" src="">
                        <iframe class="preview-iframe" src="">

                        </iframe>
                    </div>
                </div>
        </div>
    </section>
    <div th:replace="tool-info::toolInfo"></div>
    </main>
</body>
<script th:src="@{/js/cucumber.js}" type="module"></script>
<script th:src="@{/js/drag/drag.js}" type="module"></script>
</html>